import React from 'react';
import {
    NavLink,
    Redirect
  } from 'react-router-dom'
import  '../public/css/index.css'
import { RouteWithSubRoutes } from '../router/index'
import { inject, observer } from 'mobx-react';
import Header from '../Component/header'
import { Popover,Icon,Avatar,Button,Modal,Input,Radio} from 'antd';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
function onChange(e) {
    console.log(`radio checked:${e.target.value}`);
}
const ButtonGroup = Button.Group;
const content =({showChangeModal,showEditModal,exit,userData})=> {
    return (
    <div>
        <div className="p20">
            <Avatar size="large"  icon="user" className="v-m pos-rel mr-20" src={require('../public/images/head.jpg')}/>
            <div className="dib v-m">
                <h3 className="mb-10">h1!,{userData.real_name||'暂无数据'}</h3>
                <p>姓名：{userData.real_name||'暂无数据'}<span></span></p>
                <p>E-mail：{userData.email||'暂无数据'}<span></span></p>
                <p>电话：{userData.phone||'暂无数据'}<span></span></p>
            </div>
        </div>

        <ButtonGroup>
            <Button  onClick={showChangeModal}>修改密码</Button>
            <Button  onClick={exit}>注销</Button>
        </ButtonGroup>
    </div>
)};
@inject('authStore')
@observer
class Index extends React.Component {

    constructor(props) {
        super(props)
        this.showChangeModal=this.showChangeModal.bind(this)
        this.showEditModal=this.showEditModal.bind(this)
        this.exit=this.exit.bind(this)
        this.handlechangeOk=this.handlechangeOk.bind(this)
        this.handlechangeCancel=this.handlechangeCancel.bind(this)
        this.handleeditOk=this.handleeditOk.bind(this)
        this.handleeditCancel=this.handleeditCancel.bind(this)
        this.state={
            changeModalvisible:false,
            editModalvisible:false,
        }
    }
    showChangeModal(){
        this.setState({
            changeModalvisible:true
        })
    }
   



    showEditModal(){
        this.setState({
            editModalvisible:true
        })
    }
    exit(){
        this.props.authStore.logout().then(res=>{
            this.props.history.push('/')
        })
    }
    handlechangeOk(){
        let pPattern = /^[a-zA-Z][a-zA-Z0-9~!@#;\$%\^\&\*\(\)_-]/;
        if(!pPattern.test(this.props.authStore.changpwdParam.newPwd)){
            window.warning('密码以字母开头，字母数字和特殊字符组成！')
        }else{
            if(this.props.authStore.changpwdParam.originPwd==this.props.authStore.changpwdParam.newPwd){
                window.error('新密码不能与原密码重复')
            }else if(this.props.authStore.changpwdParam.newPwd!=this.props.authStore.changpwdParam.newrePwd){
                window.error('两次新密码输入不一样')
            }else{
                this.props.authStore.changePwd().then(()=>{
                    this.setState({
                        changeModalvisible:true
                    })
                })
            }
        }
}
    handlechangeCancel(){
        this.props.authStore.changpwdParam.originPwd=''
        this.props.authStore.changpwdParam.newPwd=''
        this.props.authStore.changpwdParam.newrePwd=''
        this.setState({
            changeModalvisible:false
        })
    }
    handleeditOk(){
        this.props.authStore.editUser().then(()=>{
            this.setState({
                editModalvisible:false
            })
        })
    }
    handleeditCancel(){
        this.setState({
            editModalvisible:false
        })
    }
    render (){
        const {routes}=this.props
        const {isAuth,changpwdParam,editUserParam} = this.props.authStore;
        var menuData=JSON.parse(localStorage.getItem('navData'))||{}
        const {userName,userId,role,menus}=menuData
        const {changeModalvisible,editModalvisible}=this.state
        const userData = JSON.parse(localStorage.getItem('userData')) ||''
        const {login_name,password,real_name,phone,type,charge_type,frozen,balance,description,email} = userData
        let eventObj={showChangeModal:this.showChangeModal,showEditModal:this.showEditModal,exit:this.exit,userData}
        return isAuth?(<div>
                <Modal
                    visible={changeModalvisible}
                    title="密码修改"
                    onOk={this.handlechangeOk}
                    onCancel={this.handlechangeCancel}
                    footer={[
                        <Button key="back" onClick={this.handlechangeCancel}>关闭</Button>,
                        <Button key="submit" type="primary"  onClick={this.handlechangeOk}>
                            提交
                        </Button>,
                    ]}
                >
                    <div>
                        <div style={{ marginBottom: 16 }} >
                            <Input addonBefore="原密码" type="password" value={changpwdParam.originPwd} onChange={(e)=>{changpwdParam.originPwd=e.target.value}}/>
                        </div>
                        <div style={{ marginBottom: 16 }} >
                            <Input addonBefore="新密码" type="password" value={changpwdParam.newPwd} onChange={(e)=>{changpwdParam.newPwd=e.target.value}}/>
                        </div>
                        <div style={{ marginBottom: 16 }}>
                            <Input addonBefore="密码确认" type="password" value={changpwdParam.newrePwd} onChange={(e)=>{changpwdParam.newrePwd=e.target.value}}/>
                        </div>
                    </div>
                </Modal>
            <Header>
                <img src={require('../public/images/index.png')} alt="logo" style={{'height':'40px','position':'relative','top':'6px'}}/>
                <ul className='mian-nav'>
                    {routes.map((e,i)=> {
                        return (<NavLink  activeClassName="active" key={e.name||i}   to={e.routes?e.routes[0].path:e.path}>{e.name}</NavLink>)}
                        
                        )}
                </ul>
                <div className="user-info">
                    <Avatar  src={require('../public/images/head.jpg')} size="large" icon="user" className="v-m pos-rel mr-10" style={{'top':'-3px'}}/>
                    <Popover className="v-m"  content={content(eventObj)}  placement="bottomLeft">
                        <span style={{ "color": '#fff' }}> hi!管理员</span> <Icon type="down" style={{ color: '#fff' }} />
                    </Popover>
                </div>
            </Header>
            <div className='main-body w100' >
                {routes.map((route, i) => {
                    return (
                    <RouteWithSubRoutes  style={{'height':'100%','width':'100%'}} key={i} {...route}/>
                )})
                }
            </div>
          </div>):(
            <Redirect to={{
                pathname: '/',
                state: { from: this.props.location }
            }}/>
        )
    } 
}

export default Index